<template>
	<view>

		<view>
			<view style="width: 100%;text-align: center;font-size: 30rpx;margin-top: 10rpx;font-weight: 500;">- {{data.name}} -</view>
			<hr style="height:1px;border:none;border-top:1px solid #A7A7A7;margin-top: 15rpx;" />
			<form @submit="formSubmit" @reset="formReset">
				<view v-for="(item,index) in content" :key='index'>
					<view class="view1" v-if="item.type=='text'">
						<text class="text2"><text class="text1" v-if="item.required=='true'">*</text>{{item.name}}:</text>

						<input type="text" class="p1" :name="item.name" :placeholder="item.placeholder" required="required">
					</view>
					<view class="view1" v-if="item.type=='radio'">
						<text class="text2"><text class="text1" v-if="item.required=='true'">*</text>{{item.name}}:</text>
						<radio-group :name="item.name" style="margin-top: 20rpx;" required>
							<label class="rado" v-for="(ra,a) in item.desc.split(',')">
								<radio :value="ra" class="checkbox1" /><text>{{ra}}</text>
							</label>
							<!-- <label class="rado">
								<radio value="radio2" class="checkbox1" /><text>查账征收</text>
							</label> -->
						</radio-group>
					</view>
					<view class="view1" v-if="item.type=='checkbox'">
						<text class="text2"><text class="text1" v-if="item.required=='true'">*</text>{{item.name}}:</text>
						<checkbox-group :name="item.name" style="margin-top: 20rpx;" required>
							<label class="rado" v-for="(ra,a) in item.desc.split(',')">
								<checkbox class="checkbox1" :value="ra" /><text>{{ra}}</text>
							</label>
							<!-- 	<label class="rado">
								<checkbox class="checkbox1" value="checkbox2" /><text>选项二</text>
							</label> -->
						</checkbox-group>
					</view>
				</view>

				<view style="display: flex;" v-if="he==true">
					<button form-type="submit" style="font-size: 30rpx;border-radius:7rpx;font-weight: 500;margin: 30rpx auto;width: 95%;background-color: #C90000;color: white;">马上提交</button>
					<!-- <button type="default" form-type="reset">Reset</button> -->
				</view>
			</form>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: '',
				url: uni.getStorageSync('url'),
				data: [],
				content: [],
				he: false
			}
		},
		onShareAppMessage() {

		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.getDetail()
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				console.log(formdata)
				console.log(this.content)
				var x, name;
				var index = 0;
				for (x in formdata) {
					var s = this.content[index].required
					if (s == 'true') {
						name = formdata[x]
						if (name == "" || name == null || name == undefined) {
							uni.showToast({
								title: x + '必填',
								duration: 2000,
								icon: 'none'
							});
							return;
						}

					}
					index++;
				}
				this.postDetail(formdata)
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			postDetail: function(content) {
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				uni.request({
					method: 'post',
					url: this.url + 'api/form/create', //仅为示例，并非真实接口地址。
					data: {
						form_id: this.id,
						content: JSON.stringify(content),
						status: 1
					},
					success: (res) => {
						console.log(res);
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						uni.showToast({
							title: '提交完成',
							duration: 3000,
							icon: 'none'
						});
						uni.navigateTo({
							url: '/pages/success/detail',
						});
						// this.text = 'request success';
					}
				});
			},
			getDetail: function() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				uni.request({
					url: this.url + 'api/form/' + this.id, //仅为示例，并非真实接口地址。
					// data: {
					//     text: 'uni.request'
					// },
					success: (res) => {
						console.log(res);
						this.data = res.data;
						uni.setNavigationBarTitle({
							title: res.data.name
						})
						this.content = res.data.content;
						this.he = true
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						// this.text = 'request success';
					}
				});
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}

	.rado {
		margin-right: 20rpx;
		/* float: left; */
		/* display: block; */
		width: 440rpx;
		color: #555555;
	}

	.checkbox1 {
		font-size: 30rpx;
		color: #555555;
		margin: 7rpx auto;

		/* float: left; */
		transform: scale(1)
	}

	.text1 {
		color: red;
		margin-top: 20rpx;
		margin-right: 8rpx;
	}

	.p1 {
		background-color: #F7F7F7;
		height: 90rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
	}

	.text2 {
		font-size: 30rpx;
		font-weight: 500;
	}

	.view1 {
		margin: 20rpx 30rpx;
	}
</style>
